<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能挂号 - 哈尔滨信息工程学院医院门诊系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        
        .voice-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .voice-btn:hover {
            background-color: #45a049;
        }
        
        .voice-btn.recording {
            background-color: #f44336;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
            }
        }

        .header {
            background-color: #4CAF50;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header a {
            color: white;
            text-decoration: none;
            font-weight: bold;
        }

        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
            display: flex;
            gap: 20px;
        }

        .appointment-form {
            flex: 1;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
        }

        .chat-container {
            flex: 1;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
            display: flex;
            flex-direction: column;
            height: 600px;
        }

        h2 {
            margin-top: 0;
            color: #333;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .form-group textarea {
            height: 100px;
            resize: vertical;
        }

        .btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #45a049;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            border: 1px solid #eee;
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 5px;
            background-color: #fafafa;
        }

        .message {
            margin-bottom: 10px;
            padding: 8px;
            border-radius: 5px;
        }

        .user-message {
            background-color: #dcf8c6;
            text-align: right;
        }

        .bot-message {
            background-color: #e5e5ea;
        }

        .chat-input {
            display: flex;
            gap: 10px;
        }

        .chat-input input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .chat-input button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
        }

        .chat-input button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>哈尔滨信息工程学院医院门诊系统</h1>
        <a href="/hospital/index">返回首页</a>
    </div>

    <div class="container">
        <div class="appointment-form">
            <h2>挂号信息</h2>
            <form id="appointmentForm">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" id="name" name="name" required>
                </div>

                <div class="form-group">
                    <label for="gender">性别</label>
                    <select id="gender" name="gender" required>
                        <option value="">请选择</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="age">年龄</label>
                    <input type="text" id="age" name="age" required>
                </div>

                <div class="form-group">
                    <label for="phone">联系电话</label>
                    <input type="text" id="phone" name="phone" required>
                </div>

                <div class="form-group">
                    <label for="idCard">身份证号</label>
                    <input type="text" id="idCard" name="idCard" required>
                </div>

                <div class="form-group">
                    <label for="department">就诊科室</label>
                    <select id="department" name="department" required>
                        <option value="">请选择</option>
                        <option value="内科">内科</option>
                        <option value="外科">外科</option>
                        <option value="儿科">儿科</option>
                        <option value="妇产科">妇产科</option>
                        <option value="眼科">眼科</option>
                        <option value="耳鼻喉科">耳鼻喉科</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="appointmentDate">就诊日期</label>
                    <input type="date" id="appointmentDate" name="appointmentDate" required>
                </div>

                <div class="form-group">
                    <label for="appointmentTime">就诊时间</label>
                    <select id="appointmentTime" name="appointmentTime" required>
                        <option value="">请选择</option>
                        <option value="上午">上午</option>
                        <option value="下午">下午</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="symptoms">症状描述</label>
                    <textarea id="symptoms" name="symptoms" required></textarea>
                </div>

                <button type="button" class="btn" onclick="submitAppointment()">提交挂号</button>
            </form>
        </div>

        <div class="chat-container">
            <h2>智能挂号助手</h2>
            <div class="chat-messages" id="chatMessages">
                <div class="message bot-message">您好！我是智能挂号助手，有什么可以帮助您的吗？</div>
            </div>
            <div class="chat-input">
                <input type="text" id="messageInput" placeholder="输入您的问题...">
                <button id="voiceBtnChat" class="voice-btn" title="语音输入">🎤</button>
                <button onclick="sendMessage()">发送</button>
            </div>
        </div>
    </div>

    <script src="/js/jquery.min.js"></script>
    <script>
        function submitAppointment() {
            // 表单验证
            if (!$('#appointmentForm')[0].checkValidity()) {
                alert("请填写完整的挂号信息");
                return;
            }

            // 提交表单
            $.ajax({
                url: "/hospital/patient/save",
                type: "POST",
                data: $("#appointmentForm").serialize(),
                success: function(data) {
                    if (data > 0) {
                        alert("挂号成功！请按时就诊。");
                        // 清空表单
                        $("#appointmentForm")[0].reset();
                    } else {
                        alert("挂号失败，请稍后再试。");
                    }
                },
                error: function() {
                    alert("系统错误，请稍后再试。");
                }
            });
        }

        function sendMessage() {
            var input = document.getElementById('messageInput');
            var message = input.value.trim();

            if (message) {
                // 显示用户消息
                var chatMessages = document.getElementById('chatMessages');
                var userMessageDiv = document.createElement('div');
                userMessageDiv.className = 'message user-message';
                userMessageDiv.textContent = message;
                chatMessages.appendChild(userMessageDiv);

                // 发起SSE请求
                var source = new EventSource('/hospital/ai/generateStreamAsString?message=' + encodeURIComponent(message));
                source.onmessage = function(event) {
                    if (event.data === '[complete]') {
                        source.close();
                        window.currentBotMessageDiv = null;
                        return;
                    }

                    // 如果还没有创建bot消息元素，则创建一个
                    if (!window.currentBotMessageDiv) {
                        window.currentBotMessageDiv = document.createElement('div');
                        window.currentBotMessageDiv.className = 'message bot-message';
                        chatMessages.appendChild(window.currentBotMessageDiv);
                    }

                    // 累积文本内容
                    window.currentBotMessageDiv.textContent += event.data;

                    // 滚动到底部
                    chatMessages.scrollTop = chatMessages.scrollHeight;
                };

                // 清空输入框
                input.value = '';

                // 滚动到底部
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }
        }

        // 回车发送消息
        document.getElementById('messageInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

        // 设置日期为今天
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
        var yyyy = today.getFullYear();

        today = yyyy + '-' + mm + '-' + dd;
        document.getElementById('appointmentDate').setAttribute('min', today);
        
        // 语音输入功能
        function initVoiceInput(btnId, inputId) {
            const btn = document.getElementById(btnId);
            const input = document.getElementById(inputId);
            let recognition = null;
            
            // 检查浏览器是否支持语音识别
            if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
                recognition = new SpeechRecognition();
                recognition.continuous = false;
                recognition.interimResults = false;
                recognition.lang = 'zh-CN';
                
                recognition.onstart = function() {
                    btn.classList.add('recording');
                    btn.textContent = '🔴';
                };
                
                recognition.onresult = function(event) {
                    const transcript = event.results[0][0].transcript;
                    input.value = transcript;
                };
                
                recognition.onerror = function(event) {
                    console.error('语音识别错误:', event.error);
                    alert('语音识别出错，请重试。错误信息: ' + event.error);
                    resetVoiceButton(btn);
                };
                
                recognition.onend = function() {
                    resetVoiceButton(btn);
                };
                
                btn.addEventListener('click', function() {
                    if (btn.classList.contains('recording')) {
                        recognition.stop();
                    } else {
                        recognition.start();
                    }
                });
            } else {
                // 浏览器不支持语音识别
                btn.disabled = true;
                btn.title = "您的浏览器不支持语音输入功能";
            }
        }
        
        function resetVoiceButton(btn) {
            btn.classList.remove('recording');
            btn.textContent = '🎤';
        }
        
        // 初始化语音输入功能
        document.addEventListener('DOMContentLoaded', function() {
            initVoiceInput('voiceBtnChat', 'messageInput');
        });
    </script>
</body>
</html>
